import React, {Component, createRef} from 'react';
import {MusicContainer} from "../style/MusicePlayer.css";
import {
    Body, Controls,
    Footer,
    List,
    MusicListContainer,
    MusicListItem,
    MusicListWrapper,
    SongInfo,
    Top
} from "../style/MusicList.css";

class MusicList extends Component {
    constructor(props) {
        super(props);
        this.musicPlayer = props.musicPlayer;
        this.state={
            listShow:false,
        }
        this.listRef = createRef();
    }
    componentDidMount() {
        document.addEventListener("mousedown",this.closeMusicList);
    }

    render() {
        return (
            <div>
                <button className={"iconfont nisky-gequ"} style={{fontSize:"2rem"}} onClick={()=>this.openMusicList()}/>
                <MusicListContainer ref={this.listRef} className={!this.state.listShow && "displayNone"}>
                    <MusicListWrapper>
                        <Top>
                            <strong>播放队列</strong>
                            <button className={"iconfont nisky-shanchu deleteAll"} onClick={()=>this.musicPlayer.clearList()} title={"清空播放列表"}/>
                        </Top>
                        <Body>
                            <List>
                                {
                                    this.musicPlayer.getList().map((e,index)=>
                                    <MusicListItem key={e.key}>
                                        <SongInfo>
                                            <p className={"songTitle"}>{e.title}</p>
                                            <div className={"artistName"}>
                                                {
                                                    e.artists.map(e=>
                                                        <span key={e.id}>{e.name+" "}</span>
                                                    )
                                                }
                                            </div>
                                        </SongInfo>
                                        <Controls>
                                            {
                                                this.musicPlayer._nowSong===index&&this.musicPlayer._playing?
                                                    <button className={"iconfont nisky-tingzhi"} onClick={()=>this.musicPlayer.pause()}/>:
                                                    <button className={"iconfont nisky-bofang1"} onClick={()=>this.musicPlayer.playByIndex(index)}/>
                                            }
                                            <button className={"iconfont nisky-shanchu"} onClick={()=>this.musicPlayer.deleteByIndex(index)}/>
                                        </Controls>
                                    </MusicListItem>)
                                }
                            </List>
                        </Body>
                        <Footer>foot</Footer>

                    </MusicListWrapper>
                </MusicListContainer>
            </div>
        );
    }
    openMusicList(){
        this.setState({listShow:true})
    }
    closeMusicList =(e)=>{
        if(!this.isInDom(e.clientX,e.clientY,this.listRef.current))
            this.setState({listShow:false})
    }
    isInDom(x,y,dom){
        let domRect = dom.getBoundingClientRect();
        if( y<domRect.top || domRect.bottom<y || x<domRect.left || domRect.right<x){
            return false;
        }
        return true;
    }

}

export default MusicList;